/* Responsive Design System */

/* Breakpoint Variables */
:root {
  /* Breakpoints */
  --breakpoint-xs: 480px;
  --breakpoint-sm: 768px;
  --breakpoint-md: 1024px;
  --breakpoint-lg: 1280px;
  --breakpoint-xl: 1536px;

  /* Container Widths */
  --container-xs: 100%;
  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;

  /* Spacing Scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* Mobile-specific spacing */
  --mobile-padding: 1rem;
  --tablet-padding: 1.5rem;
  --desktop-padding: 2rem;

  /* Typography Scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  /* Z-index layers */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* Responsive Container */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--mobile-padding);
  padding-left: var(--mobile-padding);
}

@media (min-width: 768px) {
  .container {
    padding-right: var(--tablet-padding);
    padding-left: var(--tablet-padding);
  }
}

@media (min-width: 1024px) {
  .container {
    padding-right: var(--desktop-padding);
    padding-left: var(--desktop-padding);
    max-width: var(--container-lg);
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: var(--container-xl);
  }
}

/* Responsive Utilities */

/* Display utilities */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }

/* Mobile-first responsive display */
@media (min-width: 768px) {
  .d-sm-none { display: none !important; }
  .d-sm-block { display: block !important; }
  .d-sm-flex { display: flex !important; }
  .d-sm-grid { display: grid !important; }
}

@media (min-width: 1024px) {
  .d-md-none { display: none !important; }
  .d-md-block { display: block !important; }
  .d-md-flex { display: flex !important; }
  .d-md-grid { display: grid !important; }
}

@media (min-width: 1280px) {
  .d-lg-none { display: none !important; }
  .d-lg-block { display: block !important; }
  .d-lg-flex { display: flex !important; }
  .d-lg-grid { display: grid !important; }
}

/* Flexbox utilities */
.flex-column { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.flex-wrap { flex-wrap: wrap !important; }
.justify-center { justify-content: center !important; }
.align-center { align-items: center !important; }

/* Spacing utilities */
.p-0 { padding: 0 !important; }
.p-1 { padding: var(--space-xs) !important; }
.p-2 { padding: var(--space-sm) !important; }
.p-3 { padding: var(--space-md) !important; }
.p-4 { padding: var(--space-lg) !important; }
.p-5 { padding: var(--space-xl) !important; }

.m-0 { margin: 0 !important; }
.m-1 { margin: var(--space-xs) !important; }
.m-2 { margin: var(--space-sm) !important; }
.m-3 { margin: var(--space-md) !important; }
.m-4 { margin: var(--space-lg) !important; }
.m-5 { margin: var(--space-xl) !important; }

/* Width utilities */
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }

/* Text utilities */
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

/* Responsive text sizing */
.text-responsive {
  font-size: var(--text-base);
}

@media (min-width: 768px) {
  .text-responsive {
    font-size: var(--text-lg);
  }
}

/* Hide scrollbar but keep functionality */
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Mobile-friendly touch targets */
.touch-target {
  min-height: 44px;
  min-width: 44px;
}

/* Responsive grid system */
.grid-responsive {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid-responsive {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
}

@media (min-width: 1024px) {
  .grid-responsive {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
  }
}

/* Stack layout for mobile */
.stack-mobile {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .stack-mobile {
    flex-direction: row;
    gap: var(--space-lg);
  }
}

/* Responsive padding */
.responsive-padding {
  padding: var(--mobile-padding);
}

@media (min-width: 768px) {
  .responsive-padding {
    padding: var(--tablet-padding);
  }
}

@media (min-width: 1024px) {
  .responsive-padding {
    padding: var(--desktop-padding);
  }
}

/* Mobile-first approach for common patterns */
.mobile-full-width {
  width: 100%;
}

@media (min-width: 768px) {
  .mobile-full-width {
    width: auto;
  }
}

/* Responsive card layout */
.card-responsive {
  width: 100%;
  margin-bottom: var(--space-md);
}

@media (min-width: 768px) {
  .card-responsive {
    width: calc(50% - var(--space-md));
  }
}

@media (min-width: 1024px) {
  .card-responsive {
    width: calc(33.333% - var(--space-md));
  }
}